<template>
  <el-tabs type="border-card">
    <el-tab-pane label="Destinies 天命">
      <simulator :list="List.Destinies"/>
    </el-tab-pane>
    <el-tab-pane label="Enhancements 天赋" v-if="0">
      <simulator :list="List.Enhancements"/>
    </el-tab-pane>
    <el-tab-pane label="General 通用天赋" v-if="0">
      <simulator :list="List.General"/>
    </el-tab-pane>
    <el-tab-pane label="Races 种族天赋" v-if="0">
      <simulator :list="List.Races"/>
    </el-tab-pane>
    <el-tab-pane label="Iconic 种族天赋" v-if="0">
      <simulator :list="List.Iconic"/>
    </el-tab-pane>
    <el-tab-pane label="Reaper 收割天赋" v-if="0">
      <simulator :list="List.Reaper"/>
    </el-tab-pane>
    <el-tab-pane label="全部" v-if="0">
      <simulator :list="List.All"/>
    </el-tab-pane>
    <el-tab-pane label="编辑页面">
      <editor :list="List.Destinies"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import simulator from './components/simulator.vue'
import editor from './components/editor.vue'
import {ElTabs, ElTabPane} from 'element-plus'
import {defineComponent} from "vue";
import data from "./data";

export default defineComponent({
  name: "Home",
  components: {
    ElTabs,
    ElTabPane,
    simulator,
    editor
  },
  data() {
    return {
      List: {Reaper: [], Enhancements: [], General: [], Iconic: [], Races: [], Destinies: [], All: []}
    }
  },
  methods: {
    async getList(name) {
      return await data.getList(name)
    }
  },
  async created() {
    await data.InitListData();
    this.List = data.List;
    console.log(this.List)
  }
});
</script>
<style>
#app {
  font-family: "Microsoft Yahei", serif;
  text-align: center;
  margin: 30px auto;
  width: 1990px;
}

.el-tabs {
  width: 100%;
}

.el-tabs__content {
  overflow-x: hidden;
  height: 80vh;
  overflow-y: auto;
  width: 100%;
}
</style>
